<template>
  <div id="tab">
    <ul>
      <li v-for="(item,i) in tab" :key="i" @click="tabClick(i)">
        <div :class="item.icon"></div>
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    tab: Array,
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    tabClick(i){
      if(i===3){
        this.$router.push('/user')
      }
      if(i===0){
        this.$router.push('/')

      }
    }
  },
};
</script>

<style lang="scss" scoped>
#tab {
  width: 100%;
  height: 1rem;
  ul {
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    li {
      flex-basis: 25%;
      text-align: center;
      line-height: 1rem;
      font-size: 0.24rem;
    }
    .active {
      color: red;
    }
  }
}
/deep/.iconfont{
    height: 25px;
    font-size: 20px;
}
</style>
